import { Image, StyleSheet, Text, View, ScrollView } from 'react-native';
import { Button, Layout, Avatar, ProgressBar, Input } from '@ui-kitten/components';
import { Link, useRouter } from 'expo-router';
import TopNavigation from '@/components/Navigation'
import { Rating, AirbnbRating } from 'react-native-ratings';
export default function StateAnalysisScreen() {
  const router = useRouter()
  const ratingCompleted = (rating: any) => {
    console.log("Rating is: " + rating)
  }
  return <ScrollView keyboardShouldPersistTaps='always'>
    <TopNavigation title='近期状态分析'></TopNavigation>
    <Layout style={{ backgroundColor: '#F4F4F4', flex: 1, padding: 15 }}>
      <Layout style={{ borderRadius: 5, overflow: 'hidden', padding: 10 }}>
        <Layout style={{ flexDirection: 'row' }}>
          <Avatar shape='round'
            style={{ marginLeft: 20, marginRight: 10 }}
            source={require('../assets/images/avatar.png')}></Avatar>
          <View>
            <Text style={{ fontSize: 16 }}>姓名： XXX</Text>
            <Text style={{ fontSize: 12 }}>任务截止时间:2025.01.09</Text>
          </View>
        </Layout>
        <View style={{ marginVertical: 10, backgroundColor: '#D8D8D8', height: 0.5 }}></View>
        <Layout style={{ marginBottom: 10, flexDirection: 'row', justifyContent: 'space-between' }}>
          <Text >任务完成情况</Text>
          <Text>100%</Text>
        </Layout>
        <ProgressBar progress={1} status='success'></ProgressBar>
        <View style={{ marginVertical: 15, backgroundColor: '#D8D8D8', height: 0.5 }}></View>
        <Layout style={{ marginBottom: 10, flexDirection: 'row', justifyContent: 'space-between' }}>
          <Text >任务完成情况</Text>
          <Text>20%</Text>
        </Layout>
        <ProgressBar progress={0.2}></ProgressBar>
        <View style={{ marginVertical: 15, backgroundColor: '#D8D8D8', height: 0.5 }}></View>
      </Layout>
      <Text style={{ fontSize: 18, marginVertical: 10 }}>情绪状况</Text>
      <Layout style={{ borderRadius: 5, overflow: 'hidden', padding: 10 }}>
        <Text style={{ marginBottom: 10 }}>情绪评价</Text>
        <Input
          size='small'
          textAlignVertical="top"
          textStyle={{paddingTop: 10, paddingBottom: 10, minHeight: 100}}
          multiline={true}
          numberOfLines={4}
          placeholder=''
        />
      </Layout>
      <Text style={{ fontSize: 18, marginVertical: 10 }}>自我满意度</Text>
      <Layout style={{ borderRadius: 5, overflow: 'hidden', padding: 10 }}>
        <Text style={{ marginBottom: 10 }}>满意评分</Text>
        <Rating
          startingValue={0}
          jumpValue={0.5}
          onFinishRating={ratingCompleted}
          style={{ paddingVertical: 10, width: '100%' }}
        />
      </Layout>

    </Layout>
  </ScrollView>
}

const styles = StyleSheet.create({
  titleContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
  },
  stepContainer: {
    gap: 8,
    marginBottom: 8,
  },
  logo: {
    height: 138,
    width: 138,
    marginTop: 204,
    marginLeft: 'auto',
    marginRight: 'auto',
    backgroundColor: '#D8D8D8',
    borderRadius: 8
  },
});
